<template>
  <div class="home">
    <button @click="handleGetUserInfo">获取用户信息</button>
    <button @click="handleClick">返回上一页</button>
    <button @click="handleClickPush">跳转到About</button>
    <button @click="handleClickReplace">替换到About(不能回退到原来的页面)</button>
    <button @click="handleClickPushArgu">携带参数跳转</button>
    <button @click="handleClickPushArguPath">url携带参数跳转</button>
    <p>{{ food }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { getUserInfo } from '@/api/user'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  props: {
    food: {
      type: String,
      default: 'apple'
    }
  },
  // 组件内守卫, 出发后进入页面渲染之前, 没有this实例
  // 如果调用next函数,这个方法执行,但是不会进入页面
  beforeRouteEnter(to, from, next){
    //如果想要使用this实例需要在next函数中调用 next(vm => { console.log(vm) })
    next()
  },
  // 即将离开时调用, 一般用于判断提示用户是否确认离开
  beforeRouteLeave(to, from, next){
    //next(false) 不离开本页面
    next()
  },
  // url发生变化,组建被复用的时候调用
  // beforeRouteUpdate(to, from, next){
  // },
  methods: {
    handleClick () {
      //this.$router.back()
      this.$router.go(-1)
    },
    handleClickPush () {
      //this.$router.push('/about')
      this.$router.push({
        name: 'about'
      })
    },
    handleClickReplace () {
      this.$router.replace({
        name: 'about'
      })
    },
    handleClickPushArgu () {
      this.$router.push({
        name: 'about',
        query: {
          name: 'wangjian'
        }
      })
    },
    handleClickPushArguPath () {
      const name = 'wangjian'
      // this.$router.push(`/argu/${name}`)
      // this.$router.push({
      //   path: `/argu/${name}`
      // })
      // path与name的区别,path下params无效
      this.$router.push({
        name: 'argu',
        params: {
          name
        }
      })
    },
    handleGetUserInfo () {
      getUserInfo({ userId: 23 }).then(res => {
        console.log('userInfo: ', res)
      })
    }
  }
}
</script>
